<template>
  <div class="PhotoInfo">
    <h3>{{ PhotoInfoData[id].title }}</h3>
    <p class="subtitle">
      <span>发表时间：{{ PhotoInfoData[id].add_time | dateFormat }}</span>
      <span>点击：{{ PhotoInfoData[id].click}} 次</span>
    </p>
    <hr>
    <!-- 缩略图区域 -->
    <vue-preview :slides="slide1[id-1]" @close="handleClose"></vue-preview>

    <!-- 图片内容 -->
    <div class="content" v-html="PhotoInfoData[id].content"></div>
    <!-- 放置现成的评论字组件 -->
    <cmt-box :id="id-1"></cmt-box>
  </div>
</template>
<script>
import comment from "../subcomponents/comment.vue";
export default {
  data() {
    return {
      // 获取路由中获取的id
      id: this.$route.params.id,
      slide1: [
        [
          {
            src: require("../../images/10.jpg"),
            msrc: require("../../images/10.jpg"),
            alt: "picture1",
            title: "Image Caption 1",
            w: 600,
            h: 400
          },
          {
            src: require("../../images/24.jpg"),
            msrc: require("../../images/24.jpg"),
            alt: "picture2",
            title: "Image Caption 2",
            w: 600,
            h: 400
          },
          {
            src: require("../../images/23.jpg"),
            msrc: require("../../images/23.jpg"),
            alt: "picture1",
            title: "Image Caption 1",
            w: 600,
            h: 400
          },
          {
            src: require("../../images/22.jpg"),
            msrc: require("../../images/22.jpg"),
            alt: "picture2",
            title: "Image Caption 2",
            w: 600,
            h: 400
          }
        ],
        [
          {
            src:
              require("../../images/21.jpg"),
            msrc:
              require("../../images/21.jpg"),
            alt: "picture1",
            title: "Image Caption 1",
            w: 600,
            h: 400
          },
          {
            src:
               require("../../images/20.jpg"),
            msrc:
              require("../../images/20.jpg"),
            alt: "picture2",
            title: "Image Caption 2",
            w: 1200,
            h: 900
          }
        ],
        [
          {
            src: require("../../images/19.jpg"),
            msrc: require("../../images/19.jpg"),
            alt: "picture1",
            title: "Image Caption 1",
            w: 600,
            h: 400
          },
          {
            src: require("../../images/18.jpg"),
            msrc: require("../../images/18.jpg"),
            alt: "picture2",
            title: "Image Caption 2",
            w: 600,
            h: 400
          }
        ],
        [
          {
            src: require("../../images/17.jpg"),
            msrc: require("../../images/17.jpg"),
            alt: "picture1",
            title: "Image Caption 1",
            w: 600,
            h: 400
          },
          {
            src: require("../../images/16.jpg"),
            msrc:require("../../images/16.jpg"),
            alt: "picture2",
            title: "Image Caption 2",
            w: 600,
            h: 400
          }
        ],
        [
          {
            src:require("../../images/15.jpg"),
            msrc: require("../../images/15.jpg"),
            alt: "picture1",
            title: "Image Caption 1",
            w: 600,
            h: 400
          },
          {
            src: require("../../images/14.jpg"),
            msrc: require("../../images/14.jpg"),
            alt: "picture2",
            title: "Image Caption 2",
            w: 600,
            h: 400
          }
        ],
        [
          {
            src: require("../../images/13.jpg"),
            msrc: require("../../images/13.jpg"),
            alt: "picture1",
            title: "Image Caption 1",
            w: 600,
            h: 400
          },
          {
            src: require("../../images/12.jpg"),
            msrc:require("../../images/12.jpg"),
            alt: "picture2",
            title: "Image Caption 2",
            w: 600,
            h: 400
          }
        ],
        [
          {
            src: require("../../images/11.jpg"),
            msrc: require("../../images/11.jpg"),
            alt: "picture1",
            title: "Image Caption 1",
            w: 600,
            h: 400
          },
          {
            src: require("../../images/10.jpg"),
            msrc: require("../../images/10.jpg"),
            alt: "picture2",
            title: "Image Caption 2",
            w: 600,
            h: 400
          }
        ],
        [
          {
            src:require("../../images/24.jpg"),
            msrc: require("../../images/24.jpg"),
            alt: "picture1",
            title: "Image Caption 1",
            w: 600,
            h: 400
          },
          {
            src:require("../../images/22.jpg"),
            msrc: require("../../images/22.jpg"),
            alt: "picture2",
            title: "Image Caption 2",
            w: 600,
            h: 400
          }
        ],
        [
          {
            src: require("../../images/23.jpg"),
            msrc: require("../../images/23.jpg"),
            alt: "picture2",
            title: "Image Caption 2",
            w: 600,
            h: 400
          }
        ],
        [
          {
            src: require("../../images/24.jpg"),
            msrc:require("../../images/24.jpg"),
            alt: "picture2",
            title: "Image Caption 2",
            w: 600,
            h: 400
          }
        ]
      ],
      PhotoInfoData: [
        {
          id: 1,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 2,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 3,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 4,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 5,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 6,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 7,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 8,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 9,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 10,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 11,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 12,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 13,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 14,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 15,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 16,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 17,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 18,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 19,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 20,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 21,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 22,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 23,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 24,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 25,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 26,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 27,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 28,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 29,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        },
        {
          id: 30,
          title: "清新有活力的公寓设计 用色彩焕然一新",
          click: 3,
          add_time: Date.now(),
          content:
            "英语世界最具权威的牛津词典上周刚刚宣布了它选出的2018年度词汇——有毒（Toxic）"
        }
      ]
    };
  },
  created() {},
  methods: {
    handleClose() {
      // console.log("close event");
    }
  },

  components: {
    "cmt-box": comment
  }
};
</script>



<style lang="scss" scoped>
.PhotoInfo {
  padding: 0 10px;
  h3 {
    font-size: 15px;
    text-align: center;
    padding: 12px 0;
    color: #26a2ff;
  }
  .subtitle {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
  }
  .content {
    font-size: 13px;
    line-height: 22px;
  }
}
</style>
